<template>
  <div class="body">
<!--    <button @click="saveRoleInfo">修改</button>-->
<!--    用户注册表单-->
    <el-form ref="registerFormRef" :model="registerForm" :rules="registerFormRules" label-width="100px" >
      <!--用户名-->
      <el-form-item  label="用户名" prop="username">
        <el-input v-model="registerForm.username" prefix-icon="el-icon-user-solid">
        </el-input>
      </el-form-item>
      <!--密码-->
      <el-form-item  label="密码" prop="password">
        <el-input  v-model="registerForm.password" prefix-icon="el-icon-lock" type="password">
        </el-input>
      </el-form-item>
      <el-form-item  label="邮箱" prop="email">
        <el-input v-model="registerForm.email" prefix-icon="el-icon-message" ></el-input>
      </el-form-item>
      <el-form-item  label="手机" prop="mobile">
        <el-input v-model="registerForm.mobile" prefix-icon="el-icon-mobile-phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 注册表单区域-->
</template>

<script>
export default {
  data() {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    }

    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }
    return {
      //  激活的下表
      active: 0,
      //  注册表单绑定的数据
      registerForm: {
        username: '王波啊啊',
        password: '123456',
        email: '1476278245@qq.com',
        mobile: '13655668763'
      },
      // 添加表单的验证规则对象
      registerFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码的长度在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    // 监听 switch 开关状态的改变
    async userStateChanged(userinfo) {
      userinfo.mg_status = true
      // console.log(userinfo.mg_state)
      // console.log(userinfo.data.id)
      const { data: res } = await this.$http.put(`v2/users/${userinfo.data.id}/state/${userinfo.mg_status}`)
      if (res.meta.status !== 200) {
        userinfo.mg_state = !userinfo.mg_state
        console.log(res)
        return this.$message.error('更新用户状态失败！')
      }
      this.$message.success('更新用户状态成功！')
    },
    // 点击按钮，分配角色
    async saveRoleInfo(info) {
      console.log(info.data.id)
      const { data: res } = await this.$http.put(`v2/users/${info.data.id}/role`, {
        rid: 43
      })
      console.log(res.data)

      if (res.meta.status !== 200) {
        return
      }

      this.$message.success('更新角色成功！')
      console.log('添加成功')
    },
    //  完成注册操作
    register() {
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('请完善表单数据')
        }
        const { data: res } = await this.$http.post('v2/users', this.registerForm)
        console.log(res)
        if (res.meta.status !== 201) {
          return this.$message.error('添加用户失败！')
        }
        // 调用分配角色函数
        this.saveRoleInfo(res).then(this.userStateChanged(res))
        // this.userStateChanged(res)
        this.$message.success('注册账号成功！')
        await this.$router.push('/shop_login')
      })
    },
    resetForm() {
      this.$refs.registerFormRef.resetFields()
    }
  }
}

</script>
<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
  }
 .body{
   text-align: center;
   align-items: center;
 }
 .el-form{
   width: 50%;
   left: 25%;
   top: 10%;
   position: absolute;
 }
  .left{
    left: 30%;
    padding-left: 10px;
  }
  .registerform{
    width: 300px;
    position: relative;
    top: 10%;
    left: 35%;
    float: left;
    /*background: #fff url(./src/assets/imgs/轮播图1.jpg) 0 0 no-repeat;*/
    >.el-form>.el-form-item>.el-input{
      padding: 0 !important;
      margin: 0 !important;
    }
  }
</style>
